<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="./echarts.common.min.js"></script>
    <script src="./jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="./pure-min.css">
    <link rel="stylesheet" href="./bootstrap.min.css" crossorigin="anonymous">

    <style>
    @font-face {
        /* font-properties */
        font-family: pictos;
        src:url('./font/wanghan.ttf'),
        url('./font/wanghan.ttf'),
        url('./font/wanghan.eot'); /* IE9 */
    }
        .page {
            width: 21cm;
            min-width: 21cm;
            max-width: 21cm;
            height: 29.7cm;
            min-height: 29.7cm;
            max-height: 29.7cm;
            padding: 2cm;
            margin: 1cm auto;
            border: 1px #D3D3D3 solid;
            border-radius: 5px;
            background: white;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
        }

        @page {
            size: A4;
            margin: 0;
        }
        @media print {
            .page {
                margin: 0;
                border: initial;
                border-radius: initial;
                width: initial;
                min-height: initial;
                box-shadow: initial;
                background: initial;
                page-break-after: always;
            }
        }
         /*去掉双重的border*/
        /*table{
            border-collapse: collapse;
            width: 21cm;
            height: 29.7cm;
            font-size: 14px;
            text-align: center;
        }*/
        /*table tr:nth-child(1) td{
            width: 25%;
        }*/
        .size{
            border-collapse: collapse; /*去掉双重的border*/
            width: 21cm;
            height: 29.7cm;
            font-size: 14px;
            text-align: center;
        }
        .size tr:nth-child(1) td{
            width: 25%;
        }

</style>
</head>
<body >
<div class="page">
    <div class="container"  id="container">
        <div class="row">
            <div class="col-sm-8">
                <table class="tableClass" style="border: 1px solid #000000;border-spacing: 0;border-collapse: collapse;font-size:1px;cursor: pointer;">
                    <tbody>
                    <tr>
                        <td tabindex="1">指标</td>
                        <td tabindex="1">数值</td>
                        <!--<td tabindex="1" colspan="1" rowspan="10"><h1 style="font-size:30px;font-family: pictos;">优秀</h1></td>-->
                    </tr>
                    <tr>
                        <td tabindex="1">Server Software</td>
                        <td tabindex="1" id="serverSoftware"></td>
                    </tr>
                    <tr>
                        <td tabindex="1">Server Hostname</td>
                        <td tabindex="1" id="serverHostname"></td>
                    </tr>
                    <tr>
                        <td tabindex="1">Server Port</td>
                        <td tabindex="1" id="serverPort"></td>
                    </tr>
                    <tr>
                        <td tabindex="1">SSL/TLS Protocol</td>
                        <td tabindex="1" id="SSL/TLSProtocol">TLSv1.2,ECDHE-RSA-AES128-GCM-SHA256,2048,128</td>
                    </tr>
                    <tr>
                        <td tabindex="1">Server Temp Key</td>
                        <td tabindex="1" id="serverTempKey"></td>
                    </tr>
                    <tr>
                        <td tabindex="1">TLS Server Name</td>
                        <td tabindex="1" id="tLSServerName"></td>
                    </tr>
                    <tr>
                        <td tabindex="1">Document Path</td>
                        <td tabindex="1" id="documentPath"></td>
                    </tr>
                    <tr>
                        <td tabindex="1">Document Length</td>
                        <td tabindex="1" id="documentLength"></td>
                    </tr>
                    <tr>
                        <td tabindex="1">Concurrency Level</td>
                        <td tabindex="1" id="concurrencyLevel"></td>
                    </tr>
                    <tr>
                        <td tabindex="1">Time taken for tests</td>
                        <td tabindex="1" id="timetakenfortests">19.785 seconds</td>
                    </tr>


                    <tr>
                        <td tabindex="1">Requests per second</td>
                        <td tabindex="1" id="Requestspersecond"> 25.27 [#/sec] (mean)</td>
                    </tr>

                    <tr>
                        <td tabindex="1">Time per request</td>
                        <td tabindex="1" id="Timeperrequest">39.570 [ms] (mean)</td>
                    </tr>
                    <!--<tr>-->
                        <!--<td tabindex="1">Time per request</td>-->
                        <!--<td tabindex="1" id="Timeperrequest">39.570 [ms] (mean, across all concurrent requests)</td>-->
                    <!--</tr>-->
                    <tr>
                        <td tabindex="1">Transfer rate</td>
                        <td tabindex="1" id="Transferrate">22.04 [Kbytes/sec] received </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <!--<div class="col-sm-4">-->

            <!--</div>-->
            <div class="col-sm-4">
                <div id="first6" style="float:left;padding-left: 20px;width: 250px;height: 200px;z-index:43;"></div>
            </div>
        </div>
    </div>
    <div class="container" >
    </div>
</div>
<div class="page">
    <div class="container">
        <!--<div class="row">-->
            <!--<div class="col-sm-8">-->
                <!--One of three columns-->
            <!--</div>-->
            <!--<div class="col-sm-4">-->
                <!--&lt;!&ndash;<div id="first6" style="float:left;padding-left: 20px;width: 250px;height: 200px;z-index:43;"></div>&ndash;&gt;-->
            <!--</div>-->
        <!--</div>-->
    </div>
</div>
<div class="page">
    <!--pure-table pure-table-bordered-->
    <div>
            <!--<div id="first3" style="float:left;padding-left: 20px;width: 380px;height: 280px;z-index:43;"></div>-->
        <div id="first" style="float:left;padding-left: 20px;width: 380px;height: 200px;z-index:43;"></div>
        <div id="first2" style="width:100%;height: 300px;z-index:43;"></div>
    </div>
</div>
</body>
	<script>
        $(document).ready(function(){
                $.ajax({
                    type:"GET",
                    url:"http://localhost:8082/hello3/",
                    dataType:"json",
                    success:function(data){
                        var list=data.absModels;
                        console.log(list);

                        $.each(list,function(i,n){
                            // var $tr_connect = $("<tr>"+
                            //     "<td>"+"connect"+"</td>"+
                            //     "<td>"+n.connect.min+"</td>"+
                            //     "<td>"+n.connect.mean+"</td>"+
                            //     "<td>"+n.connect.sd+"</td>"+
                            //     "<td>"+n.connect.median+"</td>"+
                            //     "<td>"+n.connect.max+"</td>"+
                            //     "</tr>");
                            // var $tr_processing = $("<tr>"+
                            //     "<td>"+"processing"+"</td>"+
                            //     "<td>"+n.processing.min+"</td>"+
                            //     "<td>"+n.processing.mean+"</td>"+
                            //     "<td>"+n.processing.sd+"</td>"+
                            //     "<td>"+n.processing.median+"</td>"+
                            //     "<td>"+n.processing.max+"</td>"+
                            //     "</tr>");
                            // var $tr_waiting = $("<tr>"+
                            //     "<td>"+"waiting"+"</td>"+
                            //     "<td>"+n.waiting.min+"</td>"+
                            //     "<td>"+n.waiting.mean+"</td>"+
                            //     "<td>"+n.waiting.sd+"</td>"+
                            //     "<td>"+n.waiting.median+"</td>"+
                            //     "<td>"+n.waiting.max+"</td>"+
                            //     "</tr>");
                            // var $tr_total = $("<tr>"+
                            //     "<td>"+"total"+"</td>"+
                            //     "<td>"+n.total.min+"</td>"+
                            //     "<td>"+n.total.mean+"</td>"+
                            //     "<td>"+n.total.sd+"</td>"+
                            //     "<td>"+n.total.median+"</td>"+
                            //     "<td>"+n.total.max+"</td>"+
                            //     "</tr>");
                            // var $table = $('#tbody-result');
                            // $table.append($tr_connect);
                            // $table.append($tr_processing);
                            // $table.append($tr_waiting);
                            // $table.append($tr_total);
                            // alert(n.serverHostname);
                            $("#serverHostname").text(n.serverHostname);
                            $("#serverSoftware").text(n.serverSoftware);
                            $("#serverPort").text(n.serverPort);
                            $("#serverTempKey").text(n.serverTempKey);
                            $("#tLSServerName").text(n.tLSServerName);
                            $("#documentPath").text(n.documentPath);
                            $("#documentLength").text(n.documentLength);
                            $("#concurrencyLevel").text(n.concurrencyLevel);
                            $("#completeRequests").text(n.completeRequests);
                            $("#failedRequests").text(n.failedRequests);
                            $("#totalTransferred").text(n.totalTransferred);
                            $("#hTMLTransferred").text(n.hTMLTransferred);

$("#container").append(createRow(n,i));
                            createEcharts(n,i);


                        });
                        // var table = document.getElementById("table");
                        // var node = document.createElement("tr");
                        // $("#dataTable").
                        // node.innerHTML = "<td>"+dataInfo.brand+"</td>"+"<td>"+dataInfo.model+"</td>"+"<td>"+quantity+"</td>"+"<td>"+dataInfo.price+"</td>"+"<td>"+ (dataInfo.price*quantity)+"</td>";
                        // table.appendChild(node);

                        // 基于准备好的dom，初始化echarts实例
//         function a1() {
                        var echar=echarts.init(document.getElementById("first"));

                        // 指定图表的配置项和数据
                        var option={
                            title:{text:"柱状图"},
                            tooltip:{show:true},
                            legend:{data:["销量"]},//
                            xAxis:{
                                data:["一月","二月","三月","四月"]
                            },
                            yAxis:{type:'value'},
                            series:{
                                name:"销量",
                                type:"bar",
                                data:[200,400,600,300]
                            }
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        echar.setOption(option);
                        // }






                       var chartsData=data.chartsData;
                        var option3 = {
                            // title: {
                            //     text: '堆叠区域图'
                            // },
                            tooltip : {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'cross',
                                    label: {
                                        backgroundColor: '#6a7985'
                                    }
                                }
                            },
                            legend: {
                                data:['Min','Mean','+/-[sd]','Median','Max']
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis : [
                                {
                                    type : 'category',
                                    boundaryGap : false,
                                    data : ['500','1000','1500','2000','2500','3000','3500']
                                }
                            ],
                            yAxis : [
                                {
                                    type : 'value'
                                }
                            ],
                            series : [
                                {
                                    name:'Min',
                                    type:'line',
                                    stack: '总量',
                                    areaStyle: {},
                                    smooth:true,
                                    data: chartsData.connect.min
                                },
                                {
                                    name:'Mean',
                                    type:'line',
                                    stack: '总量',
                                    areaStyle: {},
                                    smooth:true,
                                    data:chartsData.connect.mean
                                },
                                {
                                    name:'+/-[sd]',
                                    type:'line',
                                    stack: '总量',
                                    areaStyle: {},
                                    smooth:true,
                                    data:chartsData.connect.sd
                                },
                                {
                                    name:'Median',
                                    type:'line',
                                    stack: '总量',
                                    areaStyle: {normal: {}},
                                    smooth:true,
                                    data:chartsData.connect.median
                                },
                                {
                                    name:'Max',
                                    type:'line',
                                    stack: '总量',
                                    label: {
                                        normal: {
                                            show: true,
                                            position: 'top'
                                        }
                                    },
                                    areaStyle: {normal: {}},
                                    smooth:true,
                                    data:chartsData.connect.max
                                }
                            ]
                        };

                        var echar3=echarts.init(document.getElementById("first2"));
                        echar3.setOption(option3);
                        var data = genData(50);
                       var option6 = {
                            title : {
                                text: '请求成功率',
                                // subtext: '纯属虚构',
                                x:'left'
                            },
                            tooltip : {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            legend: {
                                type: 'scroll',
                                orient: 'vertical',
                                right: 10,
                                top: 20,
                                bottom: 20,
                                data: data.legendData
                                // ,
                                //
                                // selected: data.selected
                            },
                            series : [
                                {
                                    name: '请求成功率',
                                    type: 'pie',
                                    radius : '55%',
                                    center: ['40%', '50%'],
                                    data: data.seriesData,
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        },
                                        normal: {
                                            //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                                            color: function(params) {
                                                // build a color map as your need.
                                                var colorList = [
                                                    '#66CD00','#EE2C2C','#FCCE10','#E87C25','#27727B',
                                                    '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                                    '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                                ];
                                                return colorList[params.dataIndex]
                                            }
                                        }
                                    }
                                }
                            ]
                        };

                        function genData(count) {
                            // var nameList = [
                            //     '赵', '钱'
                            // ];
                            var legendData = ['成功','失败'];
                            var seriesData = [{name:'成功',value:100},{name:'失败',value:0}];
                            // var selected = {};
                            // for (var i = 0; i < 2; i++) {
                            //     name = Math.random() > 0.65
                            //         ? makeWord(4, 1) + '·' + makeWord(3, 0)
                            //         : makeWord(2, 1);
                            //     legendData.push(name);
                            //     seriesData.push({
                            //         name: name,
                            //         value: Math.round(Math.random() * 100000)
                            //     });
                            //     selected[name] = i < 6;
                            // }

                            return {
                                legendData: legendData,
                                seriesData: seriesData
                                // selected: selected
                            };

                            // function makeWord(max, min) {
                            //     var nameLen = Math.ceil(Math.random() * max + min);
                            //     var name = [];
                            //     for (var i = 0; i < nameLen; i++) {
                            //         name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);
                            //     }
                            //     return name.join('');
                            // }
                        }

                        var echar6=echarts.init(document.getElementById("first6"));
                        echar6.setOption(option6);

                    },
                    error:function(jqXHR){
                        console.log("Error: "+jqXHR.status);
                    }
                });
            // });
        });

        function createRow(abModel,i){

            var str='<div class="row">';
            str+='<div class="col-sm-5">';
            str+='<table id="editable1" class="tableClass" style="border: 1px solid #000000;border-spacing: 0;border-collapse: collapse;font-size:1px;cursor: pointer;">';
            str+='<thead>';
            str+='<tr>';
            str+='<td tabindex="1" colspan="5">Total transferred</td>';
            str+='<td tabindex="1" colspan="5" >'+abModel.totalTransferred+'</td>';
            str+='</tr>';
            str+='<tr>';
            str+='<td tabindex="1" colspan="5">HTML transferred</td>';
            str+='<td tabindex="1" colspan="5">'+abModel.hTMLTransferred+'</td>';
            str+='</tr>';
            str+='<tr>';
            str+='<td tabindex="1" colspan="5">Complete requests</td>';
            str+='<td tabindex="1" colspan="5">'+abModel.completeRequests+'</td>';
            str+='</tr>';
            str+='<tr>';
            str+='<td tabindex="1" colspan="5">Failed requests</td>';
            str+='<td tabindex="1" colspan="5">'+abModel.failedRequests+'</td>';
            str+='</tr>';
            str+='<tr>';
            str+='<td tabindex="1" colspan="6" >Connection Times(ms)</td>';
            str+='</tr>';
            str+='<tr>';
            str+='<td tabindex="1"></td>';
            str+='<td tabindex="1">min</td>';
            str+='<td tabindex="1">mean </td>';
            str+='<td tabindex="1">[+/-sd]</td>';
            str+='<td tabindex="1">median</td>';
            str+='<td tabindex="1">max</td>';
            str+='</tr>';
            str+='</thead>';
            str+='<tbody>';
            str+='<tr>';
            str+='<td>connect</td>';
            str+='<td>'+abModel.connect.min+'</td>';
            str+='<td>'+abModel.connect.mean+'</td>';
            str+='<td>'+abModel.connect.sd+'</td>';
            str+='<td>'+abModel.connect.median+'</td>';
            str+='<td>'+abModel.connect.max+'</td>';
            str+='</tr>';
            str+='<tr>';
            str+='<td>processing</td>';
            str+='<td>'+abModel.processing.min+'</td>';
            str+='<td>'+abModel.processing.mean+'</td>';
            str+='<td>'+abModel.processing.sd+'</td>';
            str+='<td>'+abModel.processing.median+'</td>';
            str+='<td>'+abModel.processing.max+'</td>';
            str+='</tr>';
            str+='<tr>';
            str+='<td>waiting</td>';
            str+='<td>'+abModel.waiting.min+'</td>';
            str+='<td>'+abModel.waiting.mean+'</td>';
            str+='<td>'+abModel.waiting.sd+'</td>';
            str+='<td>'+abModel.waiting.median+'</td>';
            str+='<td>'+abModel.waiting.max+'</td>';
            str+='</tr>';
            str+='<tr>';
            str+='<td>total</td>';
            str+='<td>'+abModel.total.min+'</td>';
            str+='<td>'+abModel.total.mean+'</td>';
            str+='<td>'+abModel.total.sd+'</td>';
            str+='<td>'+abModel.total.median+'</td>';
            str+='<td>'+abModel.total.max+'</td>';
            str+='</tr>';
            str+='</tbody>';
            str+='</table>';
            str+='</div>';
            str+='<div class="col-sm-7">';
            str+='<div id="abModel'+i+'" style="float:left;padding-left: 20px;width: 400px;height: 180px;z-index:43;"></div>';
            str+='</div>';
            str+='</div>';
            console.log(str);
            return str;
        }

        function  createEcharts(abModel,i) {
            var option1 = {
                color: ['#003366', '#006699', '#4cabce', '#e5323e'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['Connect','Processing','Waiting','Total'],
                    top: 10
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    show: false,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {show: false},
                        data: ['min','mean','[+/-sd]','median','max']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: 'Connect',
                        type: 'bar',
                        barGap: 0,
                        // label: labelOption,
                        data: abModel.connect.data
                    },
                    {
                        name: 'Processing',
                        type: 'bar',
                        // label: labelOption,
                        data:  abModel.processing.data
                    },
                    {
                        name: 'Waiting',
                        type: 'bar',
                        // label: labelOption,
                        data: abModel.waiting.data
                    },
                    {
                        name: 'Total',
                        type: 'bar',
                        // label: labelOption,
                        data: abModel.total.data
                    }
                ]
            };
            var echar2=echarts.init(document.getElementById("abModel"+i));
            echar2.setOption(option1);
        }
    </script>
</html>